import { Component, OnInit,ElementRef } from '@angular/core';
import { Location } from '@angular/common';
import { Router,ActivatedRoute } from '@angular/router';

/**响应式表单必须导入ReactiveFormsModule模块*/
import { FormGroup,FormControl,FormBuilder,Validators } from '@angular/forms';

/**测试Alert和modal*/
import { AlertService } from '../share/alert/alert.component';
import { ModalService } from '../share/modal/modal.component';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

   loginForm:FormGroup;
  constructor(private location:Location,
              private router:Router,
              private route:ActivatedRoute,
              private fb:FormBuilder,
              private alertService:AlertService,
              private modalService:ModalService,
              private elementRef:ElementRef) { 
      
   }

  ngOnInit() {
      this.loginForm=this.fb.group({
            /**使用Validators的组合验证（满足多个验证条件）*/
            username:new FormControl('',Validators.compose([Validators.required,Validators.maxLength(10)])),
            password:new FormControl('123456',Validators.compose([Validators.required,Validators.pattern('^[0-9]{6}$')])),
      });
    //this.loginForm.controls.username.setErrors({required:'fdshjfh00000'});

  }
  /**从login跳转到主页面*/
  login(userInfo){
       console.log(userInfo);
      // this.loginForm.reset();
      this.router.navigate(['../home'],{relativeTo:this.route})
      this.location.replaceState('home');
  }
  toggle(b,n){
    console.log('checked:',b,n);
  }
  radioCheck(c){
     console.log(c);
  }
 
 /**树形菜单测试*/
  treeData={
        name:'root',
        isOpen:true,
        children:[
           {name:'food',isOpen:false},
           {name:'water',isOpen:false},
           {
               name:'book',
               isOpen:false,
               children:[
                 {name:'js',isOpen:false},
                 {name:'java',isOpen:false},
                ]
           }
        ]
    };
  chooseMenu(node){

    console.log(node);
  }

  /**tabs测试*/
  tabChange(e,arg){
    console.log(e,arg);
  }

    /**alert组件测试*/
    pop(){

       this.alertService.alert('','购买成功');

    }

    /**modal测试*/

    body:string="HEHEHEHE"
    modal(content){
      this.modalService.open(content,(e)=>{alert(e)},'自定义标题');
    }
    todo(){
      alert(this.body);
      this.body="hahahaahah";
    }

    ngAfterContentChecked(){
      // this.body="888888888888";
      // console.log('checked..');
    }


    /**
     * 分页组件测试
     */
    total=99;
    page=1;
    setPage(pageObj){
      
      this.total=101;
      console.log(pageObj);

    }
    //改变输入属性的值
    setPagination(){
        // this.page=5;
         this.total=101;
  

    }

}
